<template>
  <div class="members-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">👥 会员资料管理</span>
          <div class="header-actions">
            <ImportButton 
              data-type="members" 
              @import-success="handleImportSuccess"
            />
            <ExportButton
              :data="tableData"
              :columns="exportColumns"
              filename="会员资料"
            />
            <el-button type="primary" @click="handleAdd">
              <el-icon><Plus /></el-icon>
              新增会员
            </el-button>
          </div>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" class="search-form">
        <el-form-item label="会员姓名">
          <el-input v-model="searchForm.name" placeholder="请输入会员姓名" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="会员等级">
          <el-select v-model="searchForm.level" placeholder="请选择等级" clearable>
            <el-option label="普通会员" value="normal" />
            <el-option label="银卡会员" value="silver" />
            <el-option label="金卡会员" value="gold" />
            <el-option label="钻石会员" value="diamond" />
          </el-select>
        </el-form-item>
        <el-form-item label="会员状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="正常" value="active" />
            <el-option label="冻结" value="frozen" />
            <el-option label="注销" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
              <el-icon :size="32"><User /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">会员总数</div>
              <div class="stat-value">{{ totalMembers.toLocaleString() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
              <el-icon :size="32"><UserFilled /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">活跃会员</div>
              <div class="stat-value">{{ activeMembers.toLocaleString() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
              <el-icon :size="32"><Medal /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">VIP会员</div>
              <div class="stat-value vip">{{ vipMembers.toLocaleString() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
              <el-icon :size="32"><Star /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">今日新增</div>
              <div class="stat-value new">+{{ newToday }}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 批量操作 -->
      <div v-if="selectedRows.length > 0" class="batch-actions">
        <el-alert :title="`已选择 ${selectedRows.length} 位会员`" type="info" :closable="false">
          <template #default>
            <div class="batch-buttons">
              <el-button size="small" type="success" @click="handleBatchUpgrade">批量升级</el-button>
              <el-button size="small" type="primary" @click="handleBatchSendMessage">发送消息</el-button>
              <el-button size="small" type="warning" @click="handleBatchFreeze">批量冻结</el-button>
              <el-button size="small" type="danger" @click="handleBatchDelete">批量删除</el-button>
            </div>
          </template>
        </el-alert>
      </div>

      <!-- 会员列表 -->
      <el-table :data="tableData" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="会员编号" width="120" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="level" label="会员等级" width="120">
          <template #default="{ row }">
            <el-tag :type="getLevelTag(row.level)">
              {{ getLevelName(row.level) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="points" label="积分" width="100">
          <template #default="{ row }">
            <span style="color: #f56c6c; font-weight: bold;">{{ row.points }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="储值余额" width="120">
          <template #default="{ row }">
            <span style="color: #67c23a; font-weight: bold;">¥{{ row.balance.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalConsumption" label="累计消费" width="130">
          <template #default="{ row }">
            ¥{{ row.totalConsumption.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="lastVisit" label="最后消费" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">详情</el-button>
            <el-button link type="success" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="warning" @click="handleRecharge(row)">充值</el-button>
            <el-button link type="info" @click="handlePoints(row)">积分</el-button>
            <el-button link type="danger" @click="handleFreeze(row)">冻结</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSearch"
        @current-change="handleSearch"
      />
    </el-card>

    <!-- 会员详情对话框 -->
    <el-dialog 
      v-model="detailDialogVisible" 
      title="会员详情"
      width="900px"
    >
      <el-descriptions :column="2" border v-if="currentMember">
        <el-descriptions-item label="会员编号">{{ currentMember.id }}</el-descriptions-item>
        <el-descriptions-item label="会员姓名">{{ currentMember.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ currentMember.phone }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ currentMember.gender }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{ currentMember.birthday }}</el-descriptions-item>
        <el-descriptions-item label="会员等级">
          <el-tag :type="getLevelTag(currentMember.level)">
            {{ getLevelName(currentMember.level) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="积分">
          <span style="color: #f56c6c; font-weight: bold;">{{ currentMember.points }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="储值余额">
          <span style="color: #67c23a; font-weight: bold;">¥{{ currentMember.balance?.toFixed(2) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="累计消费">
          ¥{{ currentMember.totalConsumption?.toLocaleString() }}
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ currentMember.registerTime }}</el-descriptions-item>
        <el-descriptions-item label="最后消费">{{ currentMember.lastVisit }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTag(currentMember.status)">
            {{ getStatusText(currentMember.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-tabs v-model="detailTab" style="margin-top: 20px;">
        <el-tab-pane label="消费记录" name="consumption">
          <el-table :data="consumptionRecords" border size="small" max-height="300">
            <el-table-column prop="date" label="日期" width="160" />
            <el-table-column prop="orderNo" label="订单号" width="150" />
            <el-table-column prop="amount" label="消费金额" width="120">
              <template #default="{ row }">
                ¥{{ row.amount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="points" label="获得积分" width="100" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="积分记录" name="points">
          <el-table :data="pointsRecords" border size="small" max-height="300">
            <el-table-column prop="date" label="日期" width="160" />
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="points" label="积分变动" width="120">
              <template #default="{ row }">
                <span :style="{ color: row.points > 0 ? '#67c23a' : '#f56c6c' }">
                  {{ row.points > 0 ? '+' : '' }}{{ row.points }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="balance" label="积分余额" width="120" />
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="充值记录" name="recharge">
          <el-table :data="rechargeRecords" border size="small" max-height="300">
            <el-table-column prop="date" label="日期" width="160" />
            <el-table-column prop="amount" label="充值金额" width="120">
              <template #default="{ row }">
                ¥{{ row.amount.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="bonus" label="赠送金额" width="120">
              <template #default="{ row }">
                ¥{{ row.bonus.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="method" label="支付方式" width="120" />
            <el-table-column prop="operator" label="操作员" width="100" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="dialogTitle"
      width="700px"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="会员姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="form.gender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="选择生日"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="会员等级" prop="level">
              <el-select v-model="form.level">
                <el-option label="普通会员" value="normal" />
                <el-option label="银卡会员" value="silver" />
                <el-option label="金卡会员" value="gold" />
                <el-option label="钻石会员" value="diamond" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员状态" prop="status">
              <el-select v-model="form.status">
                <el-option label="正常" value="active" />
                <el-option label="冻结" value="frozen" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="地址">
          <el-input v-model="form.address" placeholder="请输入地址" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input 
            v-model="form.remark" 
            type="textarea" 
            :rows="3"
            placeholder="请输入备注信息" 
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 充值对话框 -->
    <el-dialog v-model="rechargeDialogVisible" title="会员充值" width="600px">
      <el-form :model="rechargeForm" label-width="100px">
        <el-form-item label="会员信息">
          <el-input :value="currentMember?.name + ' (' + currentMember?.phone + ')'" disabled />
        </el-form-item>
        <el-form-item label="当前余额">
          <span style="color: #67c23a; font-weight: bold; font-size: 18px;">
            ¥{{ currentMember?.balance?.toFixed(2) }}
          </span>
        </el-form-item>
        <el-divider />
        <el-form-item label="充值金额">
          <el-input-number v-model="rechargeForm.amount" :min="0" :precision="2" />
        </el-form-item>
        <el-form-item label="充值方案">
          <el-select v-model="rechargeForm.plan" @change="handlePlanChange">
            <el-option label="无优惠" value="none" />
            <el-option label="充500送50" value="plan1" />
            <el-option label="充1000送150" value="plan2" />
            <el-option label="充2000送400" value="plan3" />
          </el-select>
        </el-form-item>
        <el-form-item label="赠送金额">
          <el-input-number v-model="rechargeForm.bonus" :min="0" :precision="2" disabled />
        </el-form-item>
        <el-form-item label="实际到账">
          <span style="color: #409eff; font-weight: bold; font-size: 20px;">
            ¥{{ (rechargeForm.amount + rechargeForm.bonus).toFixed(2) }}
          </span>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="rechargeForm.paymentMethod">
            <el-option label="微信" value="wechat" />
            <el-option label="支付宝" value="alipay" />
            <el-option label="现金" value="cash" />
            <el-option label="银行卡" value="bank" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="rechargeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleRechargeSubmit">确认充值</el-button>
      </template>
    </el-dialog>

    <!-- 积分调整对话框 -->
    <el-dialog v-model="pointsDialogVisible" title="积分调整" width="500px">
      <el-form :model="pointsForm" label-width="100px">
        <el-form-item label="会员信息">
          <el-input :value="currentMember?.name + ' (' + currentMember?.phone + ')'" disabled />
        </el-form-item>
        <el-form-item label="当前积分">
          <span style="color: #f56c6c; font-weight: bold; font-size: 18px;">
            {{ currentMember?.points }}
          </span>
        </el-form-item>
        <el-divider />
        <el-form-item label="调整类型">
          <el-radio-group v-model="pointsForm.type">
            <el-radio label="add">增加</el-radio>
            <el-radio label="reduce">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="积分数量">
          <el-input-number v-model="pointsForm.points" :min="1" />
        </el-form-item>
        <el-form-item label="调整原因">
          <el-input 
            v-model="pointsForm.reason" 
            type="textarea" 
            :rows="3"
            placeholder="请输入调整原因" 
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="pointsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePointsSubmit">确认调整</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, User, UserFilled, Medal, Star } from '@element-plus/icons-vue'
import ImportButton from '@/components/common/ImportButton.vue'
import ExportButton from '@/components/common/ExportButton.vue'

const router = useRouter()

// 搜索表单
const searchForm = reactive({
  name: '',
  phone: '',
  level: '',
  status: ''
})

// 选中的行
const selectedRows = ref([])

// 统计数据
const totalMembers = ref(15678)
const activeMembers = ref(12345)
const vipMembers = ref(3456)
const newToday = ref(89)

// 导出列配置
const exportColumns = [
  { prop: 'id', label: '会员编号' },
  { prop: 'name', label: '姓名' },
  { prop: 'phone', label: '手机号' },
  { prop: 'level', label: '会员等级' },
  { prop: 'points', label: '积分' },
  { prop: 'balance', label: '储值余额' },
  { prop: 'totalConsumption', label: '累计消费' }
]

// 表格数据
const tableData = ref([
  {
    id: 'M10001', name: '张三', phone: '13800138001', gender: '男', birthday: '1990-05-15',
    level: 'diamond', points: 8956, balance: 2500.00, totalConsumption: 125678,
    lastVisit: '2024-01-20 14:30', registerTime: '2023-01-15', status: 'active'
  },
  {
    id: 'M10002', name: '李四', phone: '13800138002', gender: '女', birthday: '1992-08-20',
    level: 'gold', points: 5678, balance: 1500.00, totalConsumption: 85234,
    lastVisit: '2024-01-19 10:15', registerTime: '2023-03-20', status: 'active'
  },
  {
    id: 'M10003', name: '王五', phone: '13800138003', gender: '男', birthday: '1988-12-10',
    level: 'silver', points: 2345, balance: 800.00, totalConsumption: 45678,
    lastVisit: '2024-01-18 16:45', registerTime: '2023-06-10', status: 'active'
  },
  {
    id: 'M10004', name: '赵六', phone: '13800138004', gender: '女', birthday: '1995-03-25',
    level: 'normal', points: 567, balance: 0, totalConsumption: 12345,
    lastVisit: '2024-01-15 09:20', registerTime: '2023-12-01', status: 'active'
  }
])

// 消费记录
const consumptionRecords = ref([
  { date: '2024-01-20 14:30', orderNo: 'SO202401001', amount: 5999, points: 599, remark: '购买iPhone 15' },
  { date: '2024-01-15 10:20', orderNo: 'SO202401002', amount: 3999, points: 399, remark: '购买AirPods' }
])

// 积分记录
const pointsRecords = ref([
  { date: '2024-01-20 14:30', type: '消费获得', points: 599, balance: 8956, remark: '购物获得' },
  { date: '2024-01-18 11:00', type: '积分兑换', points: -500, balance: 8357, remark: '兑换礼品' }
])

// 充值记录
const rechargeRecords = ref([
  { date: '2024-01-10 15:30', amount: 1000, bonus: 150, method: '微信', operator: '张三' },
  { date: '2023-12-20 10:20', amount: 500, bonus: 50, method: '支付宝', operator: '李四' }
])

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 4
})

// 对话框
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const rechargeDialogVisible = ref(false)
const pointsDialogVisible = ref(false)
const dialogTitle = ref('新增会员')
const detailTab = ref('consumption')
const formRef = ref(null)
const currentMember = ref(null)

// 表单数据
const form = reactive({
  id: null,
  name: '',
  phone: '',
  gender: '男',
  birthday: '',
  level: 'normal',
  status: 'active',
  address: '',
  remark: ''
})

// 充值表单
const rechargeForm = reactive({
  amount: 0,
  bonus: 0,
  plan: 'none',
  paymentMethod: 'wechat'
})

// 积分表单
const pointsForm = reactive({
  type: 'add',
  points: 0,
  reason: ''
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入会员姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

// 获取等级标签
const getLevelTag = (level) => {
  const map = { normal: 'info', silver: '', gold: 'warning', diamond: 'danger' }
  return map[level] || 'info'
}

// 获取等级名称
const getLevelName = (level) => {
  const map = { normal: '普通会员', silver: '银卡会员', gold: '金卡会员', diamond: '钻石会员' }
  return map[level] || level
}

// 获取状态标签
const getStatusTag = (status) => {
  const map = { active: 'success', frozen: 'warning', cancelled: 'info' }
  return map[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const map = { active: '正常', frozen: '冻结', cancelled: '注销' }
  return map[status] || status
}

// 充值方案变化
const handlePlanChange = (plan) => {
  const planMap = {
    none: 0,
    plan1: 50,
    plan2: 150,
    plan3: 400
  }
  rechargeForm.bonus = planMap[plan] || 0
}

// 搜索
const handleSearch = () => {
  ElMessage.success('查询成功')
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, { name: '', phone: '', level: '', status: '' })
  handleSearch()
}

// 选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 导入成功
const handleImportSuccess = (result) => {
  ElMessage.success(`成功导入 ${result.validRows} 条数据`)
  handleSearch()
}

// 新增
const handleAdd = () => {
  dialogTitle.value = '新增会员'
  Object.assign(form, {
    id: null, name: '', phone: '', gender: '男', birthday: '',
    level: 'normal', status: 'active', address: '', remark: ''
  })
  dialogVisible.value = true
}

// 查看详情
const handleView = (row) => {
  // 跳转到详情看板页面
  router.push({ path: `/member/dashboard/${row.id}` })
}

// 编辑
const handleEdit = (row) => {
  dialogTitle.value = '编辑会员'
  Object.assign(form, { ...row })
  dialogVisible.value = true
}

// 充值
const handleRecharge = (row) => {
  currentMember.value = row
  Object.assign(rechargeForm, { amount: 0, bonus: 0, plan: 'none', paymentMethod: 'wechat' })
  rechargeDialogVisible.value = true
}

// 充值提交
const handleRechargeSubmit = () => {
  if (rechargeForm.amount <= 0) {
    ElMessage.warning('请输入充值金额')
    return
  }
  currentMember.value.balance += rechargeForm.amount + rechargeForm.bonus
  ElMessage.success('充值成功')
  rechargeDialogVisible.value = false
}

// 积分调整
const handlePoints = (row) => {
  currentMember.value = row
  Object.assign(pointsForm, { type: 'add', points: 0, reason: '' })
  pointsDialogVisible.value = true
}

// 积分提交
const handlePointsSubmit = () => {
  if (pointsForm.points <= 0) {
    ElMessage.warning('请输入积分数量')
    return
  }
  const change = pointsForm.type === 'add' ? pointsForm.points : -pointsForm.points
  currentMember.value.points += change
  ElMessage.success('积分调整成功')
  pointsDialogVisible.value = false
}

// 冻结
const handleFreeze = (row) => {
  const action = row.status === 'active' ? '冻结' : '解冻'
  ElMessageBox.confirm(`确定要${action}会员 "${row.name}" 吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    row.status = row.status === 'active' ? 'frozen' : 'active'
    ElMessage.success(`${action}成功`)
  })
}

// 提交
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success(form.id ? '修改成功' : '新增成功')
      dialogVisible.value = false
      handleSearch()
    }
  })
}

// 批量操作
const handleBatchUpgrade = () => {
  ElMessage.success('批量升级成功')
}

const handleBatchSendMessage = () => {
  ElMessage.success('消息发送成功')
}

const handleBatchFreeze = () => {
  ElMessage.success('批量冻结成功')
}

const handleBatchDelete = () => {
  ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 位会员吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('批量删除成功')
    selectedRows.value = []
  })
}
</script>

<style scoped>
.members-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-form {
  margin-bottom: 20px;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 15px;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-value.vip {
  color: #f56c6c;
}

.stat-value.new {
  color: #67c23a;
}

.batch-actions {
  margin-bottom: 20px;
}

.batch-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>

